<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 前面四个是css渲染机制的问题,不是css的bug 
  解决上面四个问题 就利用BFC  它有自己的渲染机制


   BFC讲解
 1.概念：BFC （Block_formatting_context） 块级格式化上下文 它有自己的渲染规则，让BFC内部的盒子和外部的盒子实现隔离。

 2.解释：BFC是一个独立的区域，有自己的染规则。使用了BFC相当于加了容器隔离，使BFC内部的元素与外部元素在布局上互不影响通俗一点来讲，
   可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

3.特性
1.每个BFC区域只包含其子盒子，不包含其孙子盒子  ->父盒子开启BFC 只针对子盒子有效  孙盒子就无效了
2.每个BFC区域相互独立，互不影响


4.渲染规则
 1.BFC的区域不会与float的元素区域重叠
 2.计算BFC的高度时，浮动子元素也参与计算
 3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
 4.BFC的区域 会计算子盒到父盒子margin-top的距离


5.BFC的作用 （解决问题）
5-1.外边距重叠

5-2.浮动的元素可以使父盒子高度塌陷

5-3.浮动元素覆盖其他元素

5-4.父子盒子嵌套外边距折叠

6.如何让一个常规盒子变成BFC盒子
只要元素满足下面任一条件即可触发BFC特性：
 html根元素
 浮动元素：float:left   float:right

 绝对定位元素：position:absolute、position:fixed

 display为inline-block、table-cells、flex、flow-root

 overflow除了visible以外的值（hidden、auto、scroll)

常用：overflow:hidden    display:flow-root因为他们没有副作用
  -->
</body>
</html>